
$(function () {
    $('.main').on("mouseover",function () {
        var category=$(this).data('itemid');
        var position=$(this).data('pos');
        console.log(category);
        $.ajax({
            type:'GET',
            url:'http://localhost:8080/web_war_exploded/productPreview?categoryId='+category,
            success:function (data) {
                console.log(data);
                // $('#ToolTip').css('display','block');
                var HTML='<div><ul>';
                for(var i=0;i<data.length;i++){
                    HTML+='<li>';
                    HTML+=data[i];
                    HTML+='</li>';
                }
                HTML+='</ul></div>';
                switch (position){
                    case 1:{
                        $('.tip').css('top','-350px').css('left','40px');
                        break;
                    }
                    case 2:{
                        $('.tip').css('top','-140px').css('left','-30px');
                        break;
                    }
                    case 3:{
                        $('.tip').css('top','-70px').css('left','20px');
                        break;
                    }
                    case 4:{
                        $('.tip').css('top','20px').css('left','280px');
                        break;
                    }
                    case 5:{
                        $('.tip').css('top','-30px').css('left','430px');
                        break;
                    }
                    case 6:{
                        $('.tip').css('top','-350px').css('left','40px');
                        break;
                    }
                }
                $('.tip').html(HTML);
                $('.tip').show();
            },
            error:function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });
    $('.main').on('mouseout',function () {
        var HTML='';
        $('#ToolTip').html(HTML);
        $('#ToolTip').css('display','none');
    })
})
